﻿<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    
    <style>
		html,body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		a {
			color: #09f;
		}
		a:hover {
			text-decoration: none;
		}
		#back_to_camera {
			background: rgba(255,255,255,.9);
			clear: both;
			display: block;
			height: 40px;
			line-height: 40px;
			padding: 20px;
			position: relative;
			z-index: 1;
		}
		.fluid_container {
			bottom: 0;
			height: 100%;
			left: 0;
			
			right: 0;
			top: 0;
			z-index: 0;
		}
		#camera_wrap_4 {
			bottom: 0;
			height: 100%;
			left: 0;
			margin-bottom: 0!important;
			
			right: 0;
			top: 0;
		}
		.camera_bar {
			z-index: 2;
		}
		.camera_thumbs {
			margin-top: -100px;
			position: relative;
			z-index: 1;
		}
		.camera_thumbs_cont {
			border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		}
		.camera_overlayer {
			opacity: .1;
		}
	</style>

<title>3stone</title>
  <link href="css/maokong.css" rel="stylesheet" type="text/css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

  <link rel="stylesheet" href="css/jquery.mobile.structure.css" />
  <link rel="stylesheet" href="css/jquery.mobile.theme.css" />
  
  <script>
    var userAgent = navigator.userAgent + '';
    if (userAgent.indexOf('iPhone') > -1) {
      document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
      var mobile_system = 'iphone';
    } else if (userAgent.indexOf('Android') > -1) {
      document.write('<script src="js/lib/cordova-2.0.0.js"></sc' + 'ript>');
      document.write('<script src="js/lib/barcodescanner.js"></sc' + 'ript>');
      document.write('<script src="js/lib/webintent.js"></sc' + 'ript>');
      var mobile_system = 'android';
    } else {
      var mobile_system = '';
    }
  </script>
  
  <script src="js/lib/jquery.js"></script>
  <!-- your scripts here -->
  <script src="js/app/app.js"></script>
  <script src="js/app/bootstrap.js"></script>
  <script src="js/lib/jquery.mobile.js"></script>
  <script type='text/javascript' src='scripts/camera.min.js'></script> 
  <script>
	function onDeviceReady() {
	    console.log("We got device ready");
	    cordova.exec(null, null, "SplashScreen", "hide", []);
	}
	    // Soon to be
	    // navigator.splashscreen.hide();
		jQuery(function(){
			
			jQuery('#camera_wrap_4').camera({
				height: '50%',
				loader: 'false',
				pagination: false,
				thumbnails: false,
				hover: false,
				opacityOnGrid: false,
				portrait:true,
				time:1000,
				navigationHover:false,
				mobileNavHover:false,
				imagePath: 'images/'
			});

		});
  </script>
  <style type="text/css">
	.camera_next { display:none;}
	.camera_commands { display:none;}
	.camera_prev { display:none;}
    .ui-page {
      background-image: url(images/home_bg.jpg);
      background-repeat: repeat-x;
    }
    .ui-footer {
    }
  
    .title {
      margin: 0px;
      padding: 0px;
      width: 100%;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: 0;
      border-right-style: 0;
      border-bottom-style: 0;
      border-left-style: 0;
      background-image: url(images/bar_title.JPG);
    } 
  </style>
  </head>
  <body>

<div data-role="page" id="page">
    <div data-role="content">
    		<div class="fluid_container">
        <div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_4">
            <div data-thumb="images/S_maukong.png" data-src="images/S_maukong.png">
            </div>
            <div data-thumb="images/S_mc.png" data-src="images/S_mc.png">
            </div>
            <div data-thumb="images/S_zoo.png" data-src="images/S_zoo.png">
            </div>
        </div><!-- #camera_wrap_3 -->

    </div><!-- .fluid_container -->

     <div class="contentbody"> <a href="#page2"><img src="images/around.png"/></a> </div>
    <div class="contentbody"> <a href="#page2"><img src="images/bonus.png"/></a> </div>
  </div>
  </div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page2" >
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
      <div class="title" id="name"><img src="images/name.png" /></div>
      <img src="images/camera.png" />
    <div data-role="navbar" >
      <ul data-content-theme="e">
        <li><a href="#index"><img id="storeImg" src="images/M_store2.png"/></a></li>
        <li><a href="#index"><img id="bonusImg" src="images/M_bonus2.png"/></a></li>
        <li><a href="#contacts"><img src="images/M_record2.png"/></a></li>
        <li><a href="#events"><img src="images/M_favorite2.png" /></a></li>
      </ul>
      </div>
      <div data-role="navbar">
<ul >  
<li><a class="ui-btn-active ui-state-persist" href="#" data-theme="c">飲食</a>
<li><a href="#" data-theme="c">用餐</a>
<li><a href="#" data-theme="c">購物</a>
<li><a href="#" data-theme="c">咖啡</a>
<li><a href="#page4"  data-theme="c" >附近店家</a>
</ul>

<script>
	var ajaxQueryStoresString='';
	function ajaxQueryStores(data)
	{
		ajaxQueryStoresString='';
		var storeId='';
		for(var i=0;i<data.length;i++)
		{
			if(storeId!=data[i].Store.id)
			{
				if(i==0)
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="false">'
;
				}
				else
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
;
				}
				
			ajaxQueryStoresString+=
'    <h3>  <div  style="float:left" onclick="alert(1)"> <a href="basic2.html" rel="external" ><img src="images/7-11.jpg" ></a></div>                            '
		+'          <div>                                                              '
		+'          <div >'+data[i].Store.name+'  '+data[i].Store.tel+'</div>                                       '
		+'          <div>'+data[i].Store.addr+'</div>'
		+'          <div>156&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公尺</div>                   '
		+'        </div>                                                               '
		+'          </h3>                                                               '
+'   <p>                                             ';
		for(var j=0;j<data[i].Promo.length;j++)
		{
			ajaxQueryStoresString+=
			'<div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
			+"<h2><span style='color:red'>"
			+""+data[i].Promo[j].title+""
			+"</span></h2><p/>"
			+"<li><a href='basic2.html' rel='external' >"+data[i].Promo[j].content+"</a></li>"
			+"<li><a href='basic2.html' rel='external' >"+data[i].Promo[j].needPoints+"</a></li>"
		+'        </div>                                                               '
			;
		}
			ajaxQueryStoresString+='	   </p>                                                                                                  '
+'</div>                                                                                                        '
;
		}
			storeId=data[i].Store.id;
			}
			
	}
	
   $('#page2').live( 'pagecreate',function(event){
   $("#bonusImg").live('click',(function(e) {
	  //$.mobile.pageLoading();     
      $.mobile.showPageLoadingMsg();
      jQuery.ajax({
                url: 'http://imindmap.asia/mcouponMgr/Stores/ajaxQueryStores.json',
                type: 'post',
                data: {
                    method: 'set_user_prizes'
                },
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallbackString: ajaxQueryStores,
                complete: function(jqXHR){
                    if(jqXHR.status==200)
					{
						($("#page2Content").html(ajaxQueryStoresString)).trigger('create');
					}
					else
					{
						($("#page2Content").html(' <li>無法連線server，請稍後再試')).trigger('create');
					}
					$.mobile.hidePageLoadingMsg();
                }		
      });
      //$.mobile.pageLoading(true);     
   }));
   });

</script>
  </div>
  </div>
    <div id="page2Content" data-role="content">
    <ul id="stroeListView" data-role="listview" data-theme="d"data-filter="true" data-inset="false"  data-filter-placeholder=
  "請輸入關鍵字" data-split-icon="info">
      <li>戴入中，請稍待
    </ul>
      <script>
	  var storeId='';
	  function showPromo(id)
	  {
		  storeId=id;
		  $.mobile.changePage('#page3'); 
	  }
	  var storeI='<ul id="stroeListView" data-role="listview" data-theme="d"data-filter="true" data-inset="false" data-filter-placeholder="請輸入關鍵字" data-split-icon="info">';
    	function queryStoreInfo(data){
	for(var i=0;i<data.length;i++)
	{
		storeI+='<li> <a href="#page5" data-rel="dialog"> <img src="images/7-11.jpg">                           '
		+'          <div>                                                              '
		+'          <div>'+data[i].Store.name+'  '+data[i].Store.tel+'</div>                                       '
		+'          <div>'+data[i].Store.addr+'</div>'
		+'          <div>156&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公尺</div>                   '
		+'        </div>                                                               '
		+'          </a>                                                               '
		;
	}
	storeI+="</ul>";
	};

  $( '#page2' ).live( 'pagecreate',function(event){
   $("#storeImg").live('click',(function(e) {
	   //$.mobile.pageLoading();
	   $.mobile.showPageLoadingMsg();     
jQuery.ajax({
                url: 'http://imindmap.asia/mcouponMgr/stores/queryStoreInfo.json',
                type: 'post',
                data: {
                    method: 'set_user_prizes'
                },
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallbackString: queryStoreInfo,
                complete: function(jqXHR){
                    if(jqXHR.status==200)
					{
						($("#page2Content").html(storeI)).trigger('create');
					}
					else
					{
						($("#page2Content").html(' <li>無法連線server，請稍後再試')).trigger('create');
						
					}
					$.mobile.hidePageLoadingMsg();
                }
				

});
//$.mobile.pageLoading(true);     
}));
$("#storeImg").trigger('click');

});
    </script>
  </div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-theme="c">
        <ul>
        <li><a href="maps2.html"   rel="external"><img src="images/list.png"/></a></li>
        <li><a href="#" onclick="scanCode()"><img src="images/foot_cam.png"/></a></li>
        <li><a href="#contacts"><img src="images/foot_set.png"/></a></li>
      </ul>
      </div>
  </div>
  </div>
  <script>
  function ar()
  {
  window.plugins.webintent.startActivity({
      action: WebIntent.ACTION_VIEW,
      url: 'geo:0,0?q=' + address}, 
      function() {}, 
      function() {alert('Failed to open URL via Android Intent')};
  );
  }
  // 掃描 QR Code 並解碼
  var scanCode = function() {
      window.plugins.barcodeScanner.scan(
          function(result) {

          	if (!result.cancelled) { 
                  setTimeout(function() 
          {$.mobile.changePage( result.text, { transition: "slideup"} ); }, 500); 
              } 
          }, function(error) {
          alert("Scan failed: " + error);
      });
  }
    
  </script>
  <div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁" data-back-btn-theme="e" id="page3">
    <div data-role="header">
      <h1 ><span id="storeName"></span></h1>
    </div>
    <div data-role="content" id="promoContent">
    </div>
    
  <script>
  var promoInfo='';
  $("#page3").live("pagebeforeshow", function(e, data){
  		  
		  alert(storeId);
jQuery.ajax({
                url: 'http://imindmap.asia/mcouponMgr/promos/queryPromo.json',
                type: 'get',
                data: {
                    store_id: storeId
                },
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallbackString: queryPromoInfo,
                complete: function(jqXHR){
                    if(jqXHR.status==200)
					{
						($("#promoContent").html(promoInfo)).trigger('create');;
					}
					else
					{
						($("#promoContent").html(' <li>無法連線server，請稍後再試')).trigger('create');;
						
					}
                }
				

});

});

	function queryPromoInfo(data){
	promoInfo="";
	$("#storeName").html(data[0].Store.name);
	for(var i=0;i<data.length;i++)
	{
		if(i==0)
		{
		promoInfo+=
		"    <div data-role='collapsible' data-collapsed='false'> "
		;
		}
		else
		{
		promoInfo+=
		"    <div data-role='collapsible' data-collapsed='true'> "
		;
		}
		promoInfo+=
		"        <h2>"+data[i].Promo.title+"</h2>                               "
		+"        <ul >                                            "
		+"        <li><a href='#page4' onclick='showPromoDetail()'>"+data[i].Promo.content+"</a></li>                               "
		+"        <li><a href='#page4' onclick='showPromoDetail()'>"+data[i].Promo.needPoints+"</a></li>                  "
		+"      </ul>                                             "
		+"      </div>                                            "
		+"                                                        "	
		}
	};

	function showPromoDetail()
	{
		//alert('z');
	}
  </script>
    <div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a class="ui-btn-active" href="#home" data-icon="home"
data-transition="fade">
Home</a></li>
<li><a href="#sessions" data-icon="grid" data-transition="fade">Sessions</a>
</li>
<li><a href="#where" data-icon="info" data-transition="fade">Where</a></li>
<li><a href="#about" data-icon="star" data-transition="fade">About</a></li>
<li><a href="feedback.html" data-icon="plus" data-rel="dialog">Feedback</a>
</li>
</ul>
</div>  </div>
  </div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page4">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    <h1>Page Four</h1>
  </div>
    <div data-role="content">
     <div id="map_canvas">
     </div>
  </div>
    <div data-role="footer" data-position="fixed">
    <h1>tis is a test</h1>
  </div>
  </div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page4">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    <h1>Page Four</h1>
  </div>
    <div data-role="content">
     <div id="map_canvas">
     </div>
  </div>
    <div data-role="footer" data-position="fixed">
    <h1>tis is a test</h1>
  </div>
  </div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page5">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    
    <h1>限量優惠</h1>
  </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" data-split-icon="gear">
        <li><a href="basic2.html" rel="external">
        <img src="images/7-11.jpg">
          <h3>火鍋</h3>
          <p>兌換優惠須扣抵點數212P</p>
          <span class="ui-li-count">己兌換1份</span>
          <p class="ui-li-aside">限量100份</p>
        </a><a href="basic2.html" rel="external">Default</a></li>
        <li><a href="basic2.html" rel="external">
         <img src="images/7-11.jpg">
         <h3>龍鱈明蝦</h3>
          <p>兌換優惠須扣抵點數212P</p>
          <span class="ui-li-count">己兌換1份</span>
          <p class="ui-li-aside">限量100份</p>
        </a><a href="basic2.html" rel="external">Default</a></li>
        <li><a href="basic2.html" rel="external">
          <img src="images/7-11.jpg">
        <h3>玫瑰鹽佐酥烤牛小排</h3>
          <p>兌換優惠須扣抵點數212P</p>
          <span class="ui-li-count">己兌換1份</span>
          <p class="ui-li-aside">限量100份</p>
        </a><a href="basic2.html" rel="external">Default</a></li>
      </ul>
     
     </div>
  </div>
  </div>

</body>
  </html>
<script>
  $(document).bind('mobileinit', function() {
	  $.support.cors=true;
	$.mobile.allowCrossDomainPages = true;
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnTheme = "a";
$.mobile.page.prototype.options.headerTheme = "a";
$.mobile.page.prototype.options.footerTheme = "a";
});
  $(document).bind('pageinit')
  {
     // testtimeout();
  }
  function testtimeout(){
  setTimeout("cg()",3000);	
  }
  var i=0;
  var srcs=new Array('images/S_maukong.png','images/S_mc.png','images/S_zoo.png');
  function cg(){
  $("#imgContent").attr("src",srcs[(i++)%srcs.length]);
  setTimeout("cg()",3000);	
  }
  </script>
